<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS属性练习</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<style type="text/css">
body, div {
	padding: 10px
}

div {
	border: 1px solid #777;
}

body>div:nth-child(1) {
	float: left;
	width: 35%
}

body>div:nth-child(2) {
	float: right;
	width: 60%
}
li{
	padding: 2px
}
li:hover{
	background-color: #888;
	color: #fff;
}
li>*:nth-child(2),li>*:nth-child(3){
	float: right;
}
li>span{
	width:60%
}
li>input{
	width:30%
}
h1{
	background-color: #eee
}
</style>
</head>
<body>
	<div>
		<h1>CSS简介</h1>
		<p>在Web早期样式和内容是不区分的，比如可以通过&lt;bold>标签来显示加粗字体。随着页面内容的丰富，浏览器性能的提高，内容和样式的耦合使得HTML文件难以理解和维护。CSS的出现正是为了将样式分离到独立的文件中。
		<p>层叠样式表（Cascading Style Sheets，CSS），又称串样式列表、层次结构式样式表文件，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。
	</div>
	<div id="lx">
		<h2>请按照要求完成对左边的<font color="blue">标题 (CSS简介)</font>的样式进行修改</h2>
		<ol>
			<li v-for="(q,index) in qlist">
				<span>{{q.name}}</span>: 
				<img v-bind:style="q" src="OK.png" width="20px" >
				<input v-bind:answer="q.answer" placeholder="请填写样式，例：color:green"
					v-on:click="a(q)" 
					v-on:change="answer(q)">
			</li>
		</ol>
	</div>	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	<script type="text/javascript">
		var qlist=[
			{name:'设置边框样式为直线',answer:'border-style:solid', visibility:'hidden'},
			{name:'设置边框样式为虚线',answer:'border-style:dashed', visibility:'hidden'},
			{name:'设置边框样式为点状(dotted)',answer:'border-style:dotted', visibility:'hidden'},
			{name:'设置边框宽度为1px',answer:'border-width:1px', visibility:'hidden'},
			{name:'设置边框宽度为3像素',answer:'border-width:3px', visibility:'hidden'},
			{name:'设置上边框宽度为6像素',answer:'border-top-width:6px', visibility:'hidden'},
			{name:'设置下边框宽度为6像素',answer:'border-bottom-width:6px', visibility:'hidden'},
			{name:'设置左边框宽度为6像素',answer:'border-left-width:6px', visibility:'hidden'},
			{name:'设置右边框宽度为6像素',answer:'border-right-width:6px', visibility:'hidden'},
			{name:'设置边框颜色为red',answer:'border-color:red', visibility:'hidden'},
			{name:'设置上边框颜色为#0f0',answer:'border-top-color:#0f0', visibility:'hidden'},
			{name:'设置下边框颜色为#666666',answer:'border-bottom-color:#666666', visibility:'hidden'},
			{name:'设置左边框颜色为#ffff00',answer:'border-left-color:#ffff00', visibility:'hidden'},
			{name:'设置右边框颜色为#999',answer:'border-right-color:#999', visibility:'hidden'},
			{name:'设置背景颜色为#AAA',answer:'background-color:#AAA', visibility:'hidden'},
			{name:'设置背景颜色为#777888',answer:'background-color:#777888', visibility:'hidden'},
			{name:'设置背景为图片OK.png',answer:'background-image:url(OK.png)', visibility:'hidden'},
			{name:'设置背景为图片OK.png, 并且不平铺',answer:'background:url(OK.png) no-repeat', visibility:'hidden'},
		];
		qlist.sort((a,b)=>{return Math.random()>.5 ? -1 : 1}); 
		var lx = new Vue({
			el : '#lx',
			data : {
				qlist:qlist,
			},
			methods:{
				answer: function(q){
					if(event.srcElement.value){
						var a1 = event.srcElement.value;
						var a2 = q.answer;
						a1 = a1.replace(/\s+/g, '');
						a2 = a2.replace(/\s+/g, '');
						var arr = a1.split(":");
						$("h1").css(arr[0],arr[1]);
						a1 = a1.toLowerCase();
						a2 = a2.toLowerCase();
						q.visibility = a1 == a2 ? 'visible':'hidden';
					}
				},
				a: function(q){
					if(event.altKey){
						event.srcElement.value = q.answer;
						this.$options.methods.answer(q);
					}
				}
			}
		})
	
	</script>
</body>
</html>